<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单的三级联动</title>
</head>

<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"></select>
    <select id="country"></select>

    <script>
        //省份数组
        var provinceArr = ['河南省', '河北省'];
        //城市数组
        var cityArr = [
            ['郑州市', '开封市', '洛阳市'],
            ['石家庄', '秦皇岛', '张家口']
        ];
        //区域数组
        var countryArr = [
            [
                ['中原区', '二七区', '金水区', '管城回族区', '惠济区'],
                ['龙亭区', '祥符区', '鼓楼区', '禹王台区', '顺河回族区'],
                ['老城区', '西工区', '洛龙区']
            ],
            [
                ['长安区', '桥西区', '新华区', '井陉矿区'],
                ['海港区', '山海关区', '北戴河区', '抚宁区'],
                ['桥东区', '桥西区', '宣化区', '下花园区']
            ]
        ]
        
        //自动创建省份下拉菜单
        function createOption(obj, data) { //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项
                for(var i=0;i<data.length;i++){
                    var op = new Option(data[i], i); //创建下拉菜单中的option
                //Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
                obj.options.add(op); //将选项添加到下拉菜单中
                }
            }
        
        var province = document.getElementById('province'); //获取省份元素对象
        createOption(province, provinceArr);

        //选择省份后，自动生成对应城市的下拉菜单
        var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
        province.onchange = function () { //为省份下拉菜单添加事件
            city.options.length = 0; //清空city下的所有原有option
            createOption(city, cityArr[province.value]);
            if (province.value >= 0) {
                city.onchange();
            } else {
                country.options.length = 0;
            }
        }
        //选择城市后，自动生成对应区域的下拉菜单
        var country = document.getElementById('country'); //获取区域下拉菜单的元素对象
        city.onchange = function () {
            country.options.length = 0;
            createOption(country, countryArr[province.value][city.value]);
        };
    </script>

</body>

</html>